<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header @refresh="refresh" />
    <div class="page-main">
      <div class="page-main-query all-search">
        <FilterBar>
          <template #left>
            <el-form :inline="true">
              <el-form-item label="审批状态" prop="status">
                <el-select v-model="query.status" placeholder="请选择审批状态" clearable>
                  <el-option v-for="(item, index) in statusList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="申请平台" prop="platform">
                <el-select v-model="query.platform" placeholder="请选择申请平台" clearable>
                  <el-option v-for="(item, index) in platformList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="申请时间" prop="status">
                <el-date-picker
                  v-model="query.daterange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                />
              </el-form-item>
            </el-form>
          </template>
        </FilterBar>
      </div>
      <!-- 表格 -->
      <DynamicTable
        class="table-container"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list"
        :columns="tableColumns"
        @pagination="getList"
      />
    </div>

  </div>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive } from "vue";
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import DynamicTable from "@/components/DynamicTable";

import { useListManage } from "@/hooks";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from 'vue-router';
import {
  getDataSourcePageList,
  deleteDataSource,
  getDataSourceDetail,
} from "@/api/adaptation";
export default defineComponent({
  name: "MeansCascade",
  components: {
    Header,
    FilterBar,
    DynamicTable
  },
  setup(props, { emit, slots }) {
    const router = useRouter()
    const query = reactive({
      daterange: null,
      status: null,
      platform: null
    });
    const statusList = reactive([
      {
        label: '已审批',
        value: 1
      },
      {
        label: '未审批',
        value: 0
      }
    ])
    
    let {
      page,
      list,
      total,
      height,
      currentItem,
      editType,
      showEdit,
      refresh,
      listLoading,
      handleCreate,
      handleUpdate,
      handleDelete,
      getList,
      queryChange,
      showDetail,
      handleDetail,
    } = useListManage(props, emit, {
      getItems: getDataSourcePageList,
      query: query,
      getDetail: getDataSourceDetail,
      deleteItem: deleteDataSource,
      //   tableHeight: document.body.offsetHeight - 220
    });

    const tableColumns = ref([
      {
        label: "申请名称",
        key: "srcName",
        minWidth: "200px",
      },
      {
        label: "提供平台",
        key: "srcName",
        minWidth: "200px",
      },
      {
        label: "接口数量",
        key: "srcType",
        minWidth: "100px",
      },
      {
        label: "申请人",
        key: "srcName",
        minWidth: "200px",
      },
      {
        label: "申请部门",
        key: "srcName",
        minWidth: "200px",
      },
      {
        label: "申请说明",
        key: "srcName",
        minWidth: "300px",
      },
      {
        label: "申请时间",
        key: "srcName",
        minWidth: "200px",
      },
      {
        label: "操作",
        fixed: "right",
        width: "100px",
        render: (h, params) => (
          <span>
            {
              <el-button
                type="text"
                size="small"
                onClick={() => router.push(`/cascade/apply/${params.row.id}`)}
              >
                详情
              </el-button>
            }
          </span>
        ),
      },
    ]);
    const platformList = reactive([])
    const getPlatformList = async() => {

    }
    onMounted(() => {
      getPlatformList()
      getList();
    });

    return {
      // 筛选用到的下拉
      statusList,
      platformList,
      // 列表数据
      page,
      list,
      total,
      Search,
      listLoading,
      query,
      tableColumns,
      queryChange,
      getList,
      // 编辑数据
      editType,
      handleCreate,
      currentItem,
      showEdit,
      refresh,
      router
    };
  },
});
</script>
